<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      label-position="right"
      label-width="150px"
    >
      <h4 class="title_2">商机查询</h4>
      <el-row>
        <el-col :span="8">
          <el-form-item label="商机号" prop="buseoppCode">
            <el-input
              v-model="queryParams.buseoppCode"
              placeholder="请输入"
              clearable
              style="width: 300px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商机名称" prop="projectName">
            <el-input
              v-model="queryParams.projectName"
              placeholder="请输入"
              clearable
              style="width: 300px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商机创建机构" prop="createBranchId">
            <el-select
              v-model="queryParams.createBranchId"
              placeholder="请选择"
              clearable
              style="width: 300px"
            >
              <el-option
                v-for="dict in branchIdOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户名称" prop="clientName">
            <el-input
              v-model="queryParams.clientName"
              placeholder="请输入"
              clearable
              style="width: 300px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证件号码类型" prop="certType">
            <el-select
              v-model="queryParams.certType"
              placeholder="请选择"
              clearable
              style="width: 300px"
            >
              <el-option
                v-for="dict in certTypeOptions"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证件号码" prop="certNo">
            <el-input
              v-model="queryParams.certNo"
              placeholder="请输入"
              clearable
              style="width: 300px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商机创建人" prop="createName">
            <el-input
              v-model="queryParams.createName"
              placeholder="请输入"
              clearable
              style="width: 300px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="总公司投标" prop="isQuote">
            <el-select
              v-model="queryParams.isQuote"
              placeholder="请选择"
              clearable
              style="width: 300px"
            >
              <el-option label="全部" value="" />
              <el-option label="是" :value="1" />
              <el-option label="否" :value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="总部管理处室" prop="createSectionId">
            <el-select
              v-model="queryParams.createSectionId"
              placeholder="请选择"
              clearable
              style="width: 300px"
            >
              <el-option label="重客" :value="1" />
              <el-option label="企客" :value="0" />
              <el-option label="三航" :value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="商机状态" prop="buseoppState">
            <CheckboxGroup v-model:values="queryParams.buseoppState" :options="checkboxGroupOptions"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否ESG项目" prop="esgProject">
            <el-select
              v-model="queryParams.esgProject"
              placeholder="请选择"
              clearable
              style="width: 300px"
            >
              <el-option label="是" :value="1" />
              <el-option label="否" :value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商机创建日期" prop="createTime">
            <el-date-picker v-model="queryParams.createTime" type="date" placeholder="请选择" style="width: 300px"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="预计报价日期" prop="predictDate">
            <el-date-picker v-model="queryParams.predictDate" type="date" placeholder="请选择" style="width: 300px"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="审批通过日期" prop="processEndTime">
            <el-date-picker v-model="queryParams.processEndTime" type="date" placeholder="请选择" style="width: 300px"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="中标日期" prop="awardDate">
            <el-date-picker v-model="queryParams.awardDate" type="date" placeholder="请选择" style="width: 300px"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="center">
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        <el-button icon="Search" type="primary" @click="getList">搜索</el-button>
      </el-row>
    </el-form>

    <div class="mb10 flex_sb">
      <span class="title_2">商机列表</span>
      <div>
        <el-button plain type="primary" icon="Plus" @click="toPage('add')">新增商机</el-button>
        <el-button plain type="danger" icon="Delete" >失效</el-button>
        <el-button plain type="warning" icon="Finished" >完成</el-button>
        <el-button plain type="success" icon="Download" >导出</el-button>
      </div>
    </div>
    <el-table 
      v-loading="loading" 
      :data="tableList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="商机号" align="center" prop="buseoppCode" min-width="130" :show-overflow-tooltip="true" />
      <el-table-column label="商机名称" align="center" prop="projectName" min-width="150" :show-overflow-tooltip="true" />
      <el-table-column label="客户名称" align="center" prop="clientName" min-width="150" :show-overflow-tooltip="true" />
      <el-table-column label="预计总保费（万元)" align="center" prop="predictPremium" min-width="150" :show-overflow-tooltip="true" />
      <el-table-column label="目标保费（万元)" align="center" prop="buseoppStateStr" min-width="130" :show-overflow-tooltip="true" />
      <el-table-column label="商机状态" align="center" prop="buseoppStateStr" min-width="150" :show-overflow-tooltip="true" />
      <el-table-column label="商机创建机构" align="center" prop="createBranchName" min-width="150" :show-overflow-tooltip="true" />
      <el-table-column label="总部管理处室" align="center" prop="createSectionName" min-width="150" :show-overflow-tooltip="true" />
      <el-table-column label="商机创建人" align="center" prop="createName" min-width="150" :show-overflow-tooltip="true" />
      <el-table-column label="商机创建时间" align="center" prop="createTime" min-width="150" :show-overflow-tooltip="true" />
      <el-table-column label="预计报价日期" align="center" prop="predictDate" min-width="150" :show-overflow-tooltip="true" />
      <el-table-column label="审批通过时间" align="center" prop="processEndTime" min-width="150" :show-overflow-tooltip="true" />
      <el-table-column label="中标日期" align="center" prop="awardDate" min-width="150" :show-overflow-tooltip="true" />
      <el-table-column label="证件号码类型" align="center" prop="certTypeName" min-width="150" :show-overflow-tooltip="true" />
      <el-table-column label="证件号码" align="center" prop="certNo" min-width="150" :show-overflow-tooltip="true" />
      <el-table-column label="中标保费（万元)" align="center" prop="bidAmount" min-width="150" :show-overflow-tooltip="true" />
      <el-table-column label="是否ESG项目" align="center" prop="esgProject" min-width="150" :show-overflow-tooltip="true" />
      <el-table-column label="操作" align="center" fixed="right" min-width="150">
        <template #default="{row}">
          <el-button link type="primary" @click="toPage('details')">详情</el-button>
          <el-button link type="primary" @click="toPage('edit')" v-if="row.buseoppState=='1'">编辑</el-button>
          <el-button link type="primary" @click="toPage('approval')" v-if="row.buseoppState=='2'">审批</el-button>
          <el-button link type="primary" @click="toPage('follow')" v-if="row.buseoppState=='3'">跟进</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
  
<script setup name="MyFollowing">
import CheckboxGroup from '@/components/CheckboxGroup';
const router = useRouter();

const branchIdOptions = ref([
  { label: "总公司", value: 1 },
  { label: "武汉分公司", value: 2 },
]);
const certTypeOptions = ref([
  { label: "统一社会信用代码", value: 1 },
  { label: "其他", value: 2 },
]);

const toPage = (type) => {
  router.push({ path: "/business/"+type });
};

// 列表多选
function handleSelectionChange(selection) {
  console.log(selection)
}
// 列表查询逻辑-start
const loading = ref(false);
const tableList = ref([]);
const total = ref(0);
const queryRef = ref(null);
const checkboxGroupOptions = [
  { label: "全部", value: "all"},
  { label: "潜在商机", value: "1"},
  { label: "立项审批中", value: "2"},
  { label: "已审批跟进中", value: "3"},
  { label: "完成", value: "4"},
  { label: "失败", value: "5"},
]
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  certNo: "",
  createName: "",
  isQuote: "",
  createSectionId: "",
  buseoppState: [],
  esgProject: "",
  createTime: "",
  predictDate: "",
  processEndTime: "",
  awardDate: "",
});
const getList = () => {
  loading.value = true;
  setTimeout(() => {
    tableList.value = [
      {
        buseoppCode: 'OP20240809234324',
        projectName: '2022-2024某某商机投标',
        clientName: '中铁十七局集团有限公司',
        predictPremium: '86753.00',
        targetPremium: '3453.00',
        buseoppStateStr: '潜在商机',
        buseoppState: '1',
        createBranchName: '上海分公司',
        createSectionName: '基础建设客户处',
        createName: '张某军',
        createTime: '2022-08-09 15:31:34',
        predictDate: '2022-08-10 15:31:34',
        processEndTime: '2022-08-11 15:31:34',
        awardDate: '2022-08-12 15:31:34',
        certTypeName: '统一社会信用代码',
        certNo: '91140001100708439',
        bidAmount: '4568.00',
        esgProject: '是'
      },
      {
        buseoppCode: 'OP20240809234324',
        projectName: '2022-2024某某商机投标',
        clientName: '中铁十七局集团有限公司',
        predictPremium: '86753.00',
        targetPremium: '3453.00',
        buseoppStateStr: '立项审批中',
        buseoppState: '2',
        createBranchName: '上海分公司',
        createSectionName: '基础建设客户处',
        createName: '张某军',
        createTime: '2022-08-09 15:31:34',
        predictDate: '2022-08-10 15:31:34',
        processEndTime: '2022-08-11 15:31:34',
        awardDate: '2022-08-12 15:31:34',
        certTypeName: '统一社会信用代码',
        certNo: '91140001100708439',
        bidAmount: '4568.00',
        esgProject: '是'
      },
      {
        buseoppCode: 'OP20240809234324',
        projectName: '2022-2024某某商机投标',
        clientName: '中铁十七局集团有限公司',
        predictPremium: '86753.00',
        targetPremium: '3453.00',
        buseoppStateStr: '已审批跟进中',
        buseoppState: '3',
        createBranchName: '上海分公司',
        createSectionName: '基础建设客户处',
        createName: '张某军',
        createTime: '2022-08-09 15:31:34',
        predictDate: '2022-08-10 15:31:34',
        processEndTime: '2022-08-11 15:31:34',
        awardDate: '2022-08-12 15:31:34',
        certTypeName: '统一社会信用代码',
        certNo: '91140001100708439',
        bidAmount: '4568.00',
        esgProject: '是'
      },
      {
        buseoppCode: 'OP20240809234324',
        projectName: '2022-2024某某商机投标',
        clientName: '中铁十七局集团有限公司',
        predictPremium: '86753.00',
        targetPremium: '3453.00',
        buseoppStateStr: '完成',
        buseoppState: '4',
        createBranchName: '上海分公司',
        createSectionName: '基础建设客户处',
        createName: '张某军',
        createTime: '2022-08-09 15:31:34',
        predictDate: '2022-08-10 15:31:34',
        processEndTime: '2022-08-11 15:31:34',
        awardDate: '2022-08-12 15:31:34',
        certTypeName: '统一社会信用代码',
        certNo: '91140001100708439',
        bidAmount: '4568.00',
        esgProject: '是'
      },
    ];
    total.value = Number(tableList.value.length);
    loading.value = false;
  }, 300);
};
const resetQuery = (formEl) => {
  queryRef.value.resetFields();
  getList();
};
getList();
// 列表查询逻辑-end
</script>
  
<style lang="scss" scoped>
</style>
  